Evaluate wireframes using Gestalt Principles 使用格式塔原則評估線框圖

格式塔原理是一組關於人類如何感知和組織視覺資訊的心理學理論。它幫助我們理解使用者如何將視覺元素分組、識別模式，並從複雜畫面中提取整體意義。在網頁和 App 設計中，利用這些原則可以建立更清晰、易用、具有邏輯性的介面，從而提升使用者體驗。

線框圖中常用的三種格式塔原理

1. 相似性原則（Similarity）

使用者會將形狀、顏色、尺寸等相似的元素視為具有相同功能。

在“Wisconsin County Library”網站的“Popular at WCL（熱門圖書）”區塊中，兩個書籍展示區域使用了相同尺寸與結構的矩形和文字排列方式。

兩個矩形都顯示圖書封面。第一個文字行均為書名。

使用者認知效果：因為結構一致，使用者能立刻理解兩個區塊功能相同，有助於快速瀏覽資訊。

2. 接近性原則（Proximity）

靠得近的元素被使用者認知為是彼此關聯的。

在“Featured Collections（特色收藏）”區塊中，有兩組三個並排矩形：第一組三個矩形之間間距小，顯示為同一組圖書集合。第二組與第一組之間留有較大間距，表示是不同集合。

使用者認知效果：空間上的分組幫助使用者劃分資訊模組，明確內容間的關聯性。

3. 共同區域原則（Common Region）

位於同一邊框或視覺區域內的元素，被視為屬於同一組。

在首頁頂部的“Featured Author（特色作者）”部分：一個邊框框住了標題、子標題和描述文字。左邊還配有作者的影象。使用者認知效果：這個視覺框告訴使用者：這一整塊內容都是關於該位作者的資訊。

設計提示（Design Tips）

1. 使用相似的元素（如同樣尺寸的卡片、統一風格的按鈕）來傳達功能一致性。

2. 透過合理的空間間距控制資訊的組織方式，讓使用者一眼能看出哪些內容是關聯的。

3. 用邊框或背景色劃定視覺區域，幫助使用者快速識別功能模組。

4. 回顧自己的線框圖：是否有想要傳達“相關性”的元素被放得太遠？可以調整佈局來更符合上述原則。